<template>
  <div class="city">
    <div id="detail" style="width: 100%;height:12rem;"></div>
  </div>
</template>

<script>
import '../../utils/city'
import api from '../../api/index'
export default {
  props: ['name', 'id'],
  data() {
    return {
      cityArr: [],
      type: this.id
    }
  },
  created() {
    api.getChinaCityData({
      provinceNames: this.name
    }).then(res => {
      var arr = res.data
      for (var i = 0; i < arr.length; i++) {
        var obj = {}
        if(this.id==0){
          obj.name =this.setName(arr[i].cityName)
          obj.value = arr[i].currentConfirmedCount
        }else{
          obj.name =this.setName(arr[i].cityName)
          obj.value = arr[i].confirmedCount
        }

        this.cityArr.push(obj)
      }
      this.$nextTick(()=>{
         this.chinaMap('detail',this.name,this.cityArr)
      })
    })
  },
  methods: {
    setName(name) {
      if (name.match('巴音郭楞州')) {
        return '巴音郭楞蒙古自治州'
      } else if (name.match('昌吉州')) {
        return '昌吉回族自治州'
      } else if (name.match('海西州')) {
        return '海西蒙古族藏族自治州'
      } else if (name.match('果洛州')) {
        return '果洛藏族自治州'
      } else if (name.match('黄南州')) {
        return '黄南藏族自治州'
      } else if (name.match('海北州')) {
        return '海北藏族自治州'
      } else if (name.match('海南州')) {
        return '海南藏族自治州'
      } else if (name.match('玉树州')) {
        return '玉树藏族自治州'
      } else if (name.match('兰州') || name.match('锦州') || name.match('沧州') || name.match('德州') || name.match('滨州') || name.match('忻州') || name.match('朔州') || name.match('郑州') || name.match('达州') || name.match('泸州') || name.match('钦州') || name.match('柳州') || name.match('贺州') || name.match('梧州') || name.match('永州') || name.match('郴州') || name.match('亳州') || name.match('宿州') || name.match('滁州') || name.match('徐州') || name.match('扬州') || name.match('泰州') || name.match('苏州') || name.match('常州') || name.match('随州') || name.match('荆州')
        || name.match('鄂州') || name.match('杭州') || name.match('湖州') || name.match('台州') || name.match('温州') || name.match('衢州') || name.match('抚州') || name.match('赣州') || name.match('广州') || name.match('惠州') || name.match('梅州') || name.match('潮州') || name.match('福州') || name.match('泉州') || name.match('漳州') || name.match('儋州')) {
        return name + '市'
      }
        //   else if(name.match(/ [\u4e00-\u9fa5]州/g)){
        //   return name+'市'
      // }
      else if (name.match('甘南')) {
        return '甘南藏族自治州'
      } else if (name.match('乐东')) {
        return '乐东黎族自治县'
      } else if (name.match('昌江')) {
        return '昌江黎族自治县'
      } else if (name.match('保亭县')) {
        return '保亭黎族苗族自治县'
      } else if (name.match('琼中县')) {
        return '琼中黎族苗族自治县'
      } else if (name.match('恩施州')) {
        return '恩施土家族苗族自治州'
      } else if (name.match('湘西自治州')) {
        return '湘西土家族苗族自治州'
      } else if (name.match('大理')) {
        return '大理白族自治州'
      } else if (name.match('楚雄')) {
        return '楚雄彝族自治州'
      } else if (name.match('文山')) {
        return '文山壮族苗族自治州'
      } else if (name.match('黔西南州')) {
        return '黔西南布依族苗族自治州'
      } else if (name.match('黔南州')) {
        return '黔南布依族苗族自治州'
      } else if (name.match('黔东南州')) {
        return '黔东南苗族侗族自治州'
      } else if (name.match('西双版纳')) {
        return '西双版纳傣族自治州'
      } else if (name.match('梁平区')) {
        return '梁平县'
      } else if (name.match('武隆区')) {
        return '武隆县'
      }
      else if (name.match('酉阳县')) {
        return '酉阳土家族苗族自治县'
      } else if (name.match('秀山县')) {
        return '秀山土家族苗族自治县'
      } else if (name.match('彭水县')) {
        return '彭水苗族土家族自治县'
      } else if (name.match('石柱县')) {
        return '石柱土家族自治县'
      } else if (name.match('红河')) {
        return '红河哈尼族彝族自治州'
      } else if (name.match('德宏')) {
        return '德宏傣族景颇族自治州'
      } else if (name.match('临夏')) {
        return '临夏回族自治州'
      } else if (name.match('凉山')) {
        return '凉山彝族自治州'
      } else if (name.match('延边')) {
        return '延边朝鲜族自治州'
      } else if (name.match('甘孜州')) {
        return '甘孜藏族自治州'
      } else if (name.match('阿坝州')) {
        return '阿坝藏族羌族自治州'
      } else if (this.name.match('北京') || name.match('通州') || name.match('崇明') || name.match('宝山') || name.match('嘉定') || name.match('青浦') || name.match('松江') || name.match('奉贤') || name.match('金山') || name.match('闵行') || name.match('杨浦') || name.match('普陀') || name.match('静安') || name.match('长宁') || name.match('徐汇') || name.match('虹口') || name.match('黄浦')) {
        return name + '区'
      } else if ((name.match(/(?:盟).*/g) || name.match(/(?:州).*/g) || name.match(/(?:区).*/g) || name.match(/(?:旗).*/g)) || (name.match(/(?:县).*/g))) {
        return name;
      } else if ((name.match('那曲')) || (name.match('阿勒泰')) || (name.match('塔城')) || (name.match('喀什')) || (name.match('和田')) || (name.match('阿克苏')) || (name.match('大兴安岭'))) {
        return name + '地区'
      } else if(name.match(/(?:市).*/g)){
        return name
      }
      else
        return name + '市';
    },
    chinaMap(id, cityname, data) {
      var type = this.type;
      var myChart = this.$echarts.init(document.getElementById(id))
      var option = {
        tooltip: {
          triggerOn: 'click',
          enterable: true,
          formatter(item) {
            if (type == 0) {
              return item.name + '现存确诊' + item.value
            } else {
              return item.name + '累计确诊' + item.value
            }
          }
        },
        visualMap: [{
          orient: 'vertical',
          type: 'piecewise',
          itemWidth: 14,
          bottom: 0,
          pieces: [
            {
              min: 0,
              max: 0,
              color: 'rgb(226,235,244)'
            },
            {
              min: 1,
              max: 9,
              color: 'rgb(255,242,207)'
            },
            {
              min: 10,
              max: 99,
              color: 'rgb(255,206,160)'
            },
            {
              min: 100,
              max: 499,
              color: 'rgb(255,165,119)'
            },
            {
              min: 500,
              max: 999,
              color: 'rgb(255,99,65)'
            },
            {
              min: 1000,
              max: 9999,
              color: 'rgb(255,39,54)'
            },
            {
              min: 10000,
              color: 'rgb(222,31,5)'
            },
          ]
        }],
        series: [{
          name: '市',
          type: 'map',
          map: cityname,
          roam: false,
          zoom: 1.2,
          aspectScale: 0.75,
          top: 40,
          layoutCenter: ['5%', '5%'],
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 8
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: 'rgba(0,255,236,0)',
              borderColor: 'rgba(0,0,0,0.2)'
            },
            emphasis: {
              areaColor: 'rgba(255,180,0,0.8)',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0
            }
          },
          data
        }]
      }
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="less" scoped>
.city{
  background-color: #fff;
}
</style>

